<template>
	<view class="content">
		<!-- 页面自定义标题 -->
		<view class="header">
			<image class="img1" src="/static/back2.png" mode="" @click="back"></image>
			<view class="title">定时</view>
			<!-- <image class="img2" src="/static/switch.png" mode=""></image> -->
			<image class="img3" src="/static/add_timing.png" mode="" @click="open_popup('add')"></image>
		</view>
		<!--  定时方案  -->
		<view class="timing_List" v-if="this.timing_List == []">
			<view class="box">
				<image class="Notadded" src="/static/Notadded.png" mode=""></image>
				<view class="sp1">未设置时间</view>
				<view class="sp2" @click="open_popup('add')" >立即添加</view>
			</view>
		</view>
		<view class="timing_Listbox" v-else>
			<view class="List_info" v-for="(item, index) in this.timing_List" :key="index">
				<view style="width: 70%; height: 100%" @click="open_popup('exit')">
					<span class="List_info_time">{{ item.time }}</span>
					<span class="Device_status" v-if="item.Device_status">
						打开设备
						<span class="List_info_day">{{ item.day }}</span>
					</span>
					<span class="Device_status" v-else>
						关闭设备
						<span class="List_info_day">{{ item.day }}</span>
					</span>
				</view>
				<switch v-if="item.Scenario_status" class="switch" color="#00d8af" checked @change="(e) => switchChange(e, item.id)" />
				<switch v-else class="switch" color="#00d8af" @change="(e) => switchChange(e, item.id)" />
			</view>
		</view>

		<!-- 定时设置 -->
		<uni-popup ref="popup_time" >
			<view class="popup_time">
				<TimePicker usekey="timeSelect" :title="popup_title" :Scenario_status="popup_Scenario" @change="bindChange" @close="closepopup_time" />
			</view>
		</uni-popup>

		<!-- 定时编辑 -->
		<!-- <uni-popup ref="popup_time_exit">
			<view class="popup_time">
				<TimePicker usekey="timeSelect" :title="popup_title"   @change="bindChange" @close="closepopup_time" />
			</view>
		</uni-popup -->

		<!-- 提示 -->
		<showTip ref="showtip" :title="tiptitle" :type="modeltype"></showTip>
	</view>
</template>

<script>
import showTip from '@/componts/showmodel/showmodel.vue';
import TimePicker from '@/componts/TimePicker/TimePicker.vue';

export default {
	components: {
		showTip,
		TimePicker // 注册组件
	},
	data() {
		return {
			title: '',
			tiptitle: '',
			modeltype: '',
			popup_title:'',
			popup_Scenario:false,
			timing_List: [
				{
					id: 1,
					time: '08:00',
					Device_status: true, //设备状态（开启或关闭）
					day: '每天', //周一到周日
					Scenario_status: true //方案状态(开启或关闭)
				},
				{
					id: 2,
					time: '20:00',
					Device_status: false, //设备状态（开启或关闭）
					day: '周六', //周一到周日
					Scenario_status: false //方案状态(开启或关闭)
				}
			],
			time_List:{}
		};
	},
	onLoad() {
		Hejia.ready(function () {
			// 页面加载完成后要立即调用Hejia全局对象执行的代码逻辑写这里
		});
	},
	methods: {
		//返回按钮
		back() {
			uni.navigateBack();
		},
		//打开popup
		open_popup(type){
			console.log(type);
			if(type=='add'){
				this.popup_title="添加定时"
				this.popup_Scenario=false
				this.$refs.popup_time.open('bottom')
			}else if(type=='exit'){
				this.popup_title="编辑定时"
				this.popup_Scenario=true
				this.$refs.popup_time.open('bottom')
			}
			
		},
		//关闭定时设置
		closepopup_time(hour, minute) {
			this.$refs.popup_time.close();
			this.$refs.popup_time_exit.close();
			this.time_List = {};
			this.time_List.hour = hour;
			this.time_List.minute = minute;
			console.log('小时:', this.time_List.hour, '分钟:', this.time_List.minute);
		},
		// 开启延迟开关
		switchChange(e, id) {
			console.log('定时开关', e.detail.value);
			console.log('定时id', id);
		},
		// model提示
		model(title, type) {
			this.tiptitle = title;
			this.modeltype = type;
			this.$nextTick(() => {
				// 确保子组件已渲染完成
				this.$refs.showtip.open();
			});
			// this.model('设置成功','success')
			// this.model('设置失败','error')
			// this.model('请重新设置','cancel')
		},
		bindChange(e) {
			// if (this.timer) {
			// 	clearTimeout(this.timer);
			// }
			// // 设置 1.5 秒后打印 score
			// this.timer = setTimeout(() => {
			// 	console.log('数据发生变化时触发', e);
			// }, 1500);
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-switch-input {
	z-index: 99;
	height: 32px;
	width: 52px;
}
::v-deep .uni-switch-input:after {
	// top: -2px;
	width: 28px;
	height: 28px;
	// box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
}
::v-deep .uni-switch-input:before {
	height: 32px;
	width: 52px;
}

.content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f2f5f5;
	margin: 0;
	padding-bottom: 150px;
	overflow-y: auto;
	.header {
		// width: 375px;
		width: 100%;
		height: 64px;
		background: #f2f5f5;
		position: relative;
		.img1 {
			height: 24px;
			width: 24px;
			margin: 32px 0 0 16px;
			display: inline-block;
		}
		.title {
			position: absolute;
			top: 65%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: inline-block;
			width: 154px;
			height: 24px;
			font-weight: 400;
			font-size: 17px;
			color: #000000;
			line-height: 24px;
			text-align: center;
			font-face: PingFangSC-Regular;
		}
		.img3 {
			width: 24px;
			height: 24px;
			position: absolute;
			top: 32px;
			right: 16px;
			bottom: 8px;
		}
	}

	.timing_List {
		height: 748px;
		width: 100%;
		background-color: #f2f5f5;
		position: relative;
		.box {
			position: absolute;
			width: 140px;
			height: 192px;
			top: 25%;
			left: 50%;
			transform: translate(-50%, 0);
			display: flex;
			flex-direction: column;
			text-align: center;
			.Notadded {
				width: 140px;
				height: 140px;
			}
			.sp1 {
				font-weight: 400;
				font-size: 12px;
				color: #797a7a;
			}
			.sp2 {
				display: block;
				margin-top: 13px;
				font-weight: 500;
				font-size: 16px;
				color: #00d8af;
			}
		}
	}
	.timing_Listbox {
		height: 748px;
		width: 100%;
		background-color: #f2f5f5;
		display: flex;
		flex-direction: column;
		margin-left: 16px;
		.List_info {
			height: 76px;
			border-bottom: 1px solid #e5e5e5;
			position: relative;
			.List_info_time {
				position: absolute;
				top: 4px;
				left: 0;
				font-weight: 400;
				font-size: 28px;
				color: #000000;
			}
			.Device_status {
				position: absolute;
				left: 0;
				bottom: 10px;
				font-weight: 400;
				font-size: 14px;
				color: #000000;
			}
			.List_info_day {
				display: inline-block;
				margin-left: 10px;
				z-index: 2;
			}
			.switch {
				position: absolute;
				right: 16px;
				top: 22px;
				width: 52px;
				height: 32px;
				z-index: 99;
			}
		}
	}
	.popup_time {
		width: 100%;
		height: 100%;
		background: #ffffff;
		border-radius: 10px 10px 0px 0px;
		overflow: hidden;
	}
}
</style>
